<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <!-- 考试题库 -->
      <labExamRepoTable ref="registerRepoModal" @sendData="handleData"></labExamRepoTable>
      <a-row>
        <a-col :span="12">
          <a-form-item label="考试名称" v-bind="validateInfos.name">
            <a-input v-model:value="formData.name" style="width: 875px;height: 35px;"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="总分数" v-bind="validateInfos.totalScore">
            <a-input-number v-model:value="formData.totalScore" style="width: 100%" :disabled="true" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="及格分数" v-bind="validateInfos.passScore">
            <a-input-number v-model:value="formData.passScore" :min="0" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="开始时间" v-bind="validateInfos.startTime">
            <a-date-picker v-model:value="formData.startTime" showTime valueFormat="YYYY-MM-DD HH:mm"
              style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="结束时间" v-bind="validateInfos.endTime">
            <a-date-picker v-model:value="formData.endTime" showTime valueFormat="YYYY-MM-DD HH:mm" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="总时长" v-bind="validateInfos.totalTime">
            <a-input-number v-model:value="formData.totalTime" :min="0" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="考试类型" v-bind="validateInfos.openType">
            <a-select v-model:value="formData.openType" @change="changeType">
              <a-select-option value="完全公开">完全公开</a-select-option>
              <a-select-option value="部门开发">部门开发</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="考试部门" v-bind="validateInfos.examDepart">
            <j-select-dept v-model:value="formData.examDepart" :disabled="Ddisabled" :showButton="false"
              style="width: 875px;height: 35px;" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { saveOrUpdate, examRepoByMainId } from '../LabExam.api';
import { Form } from 'ant-design-vue';
import labExamRepoTable from './labExamRepoTable.vue';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';

const props = defineProps({
  formDisabled: { type: Boolean, default: false },
  formData: { type: Object, default: () => { } },
  formBpm: { type: Boolean, default: true }
});

const registerRepoModal = ref();
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const Ddisabled = ref<boolean>(false);
const formData = reactive<Record<string, any>>({
  id: '',
  name: '',
  openType: '',
  status: '未发布',
  timeLimit: false,
  startTime: '',
  endTime: '',
  totalScore: undefined,
  totalTime: undefined,
  passScore: undefined,
  examPerson: '',
  examDepart: '',
  labExamRepoList: [],
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
  name: [{ required: true, message: '请输入考试名称!' },],
  openType: [{ required: true, message: '请选择考试类型!' },],
  passScore: [{ required: true, message: '请输入及格分数!' },],
  startTime: [{ required: true, message: '请选择开始时间!' },],
  endTime: [{ required: true, message: '请选择结束时间!' },],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });

function changeType() {
  if (formData.openType == '完全公开') {
    Ddisabled.value = true;
    formData.examDepart = '';
  } else if (formData.openType == '部门开发') {
    Ddisabled.value = false;
  } else {
    Ddisabled.value = true;
  }
}

function handleData(data) {
  formData.totalScore = data;
}

function reset() {
  formData.id = '';
  formData.name = '';
  formData.openType = '';
  formData.status = '';
  formData.timeLimit = false;
  formData.startTime = '';
  formData.endTime = '';
  formData.totalScore = 0;
  formData.totalTime = 0;
  formData.passScore = 0;
  formData.examPerson = '';
  formData.examDepart = '';
  formData.labExamRepoList = [];
}

/**
 * 新增
 */
function add() {
  edit({});
}

/**
 * 编辑
 */
async function edit(record) {
  reset();
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, record);
    if (formData.openType == "") {
      formData.openType = "完全公开";
    }
  });
  if (record.id != null && record.id != "") {
    formData.labExamQuestionAnswerList = (await examRepoByMainId({ id: record.id }))
    registerRepoModal.value.handleAddS(formData.labExamQuestionAnswerList.records);
  }
}

/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  if (formData.id) {
    isUpdate.value = true;
  }
  formData.labExamRepoList = registerRepoModal.value.formData.labExamRepoList;
  await saveOrUpdate(formData, isUpdate.value)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        emit('ok');
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      confirmLoading.value = false;
    });
}


defineExpose({
  add,
  edit,
  submitForm
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 500px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}
</style>
